<!--
 * @Author: your name
 * @Date: 2022-03-02 12:50:26
 * @LastEditTime: 2022-04-19 11:04:50
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-img.vue
-->
<template>
  <!-- 仓储信息 -->
  <el-card id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>仓储信息 STORAGE INFOTMATION</span>
    </div>
    <div class="storage">
      <div class="storage-left">
        <h5>入库日期</h5>
        <p class="inputoutput">
          <i></i>
          <span class="inputoutput-base inputoutput-typeone">2</span>
          <span class="inputoutput-base inputoutput-typeone">0</span>
          <span class="inputoutput-base inputoutput-typeone">2</span>
          <span class="inputoutput-base inputoutput-typeone">1</span>
          <span class="inputoutput-base inputoutput-typetwo">年</span>
          <span class="inputoutput-base inputoutput-typeone">1</span>
          <span class="inputoutput-base inputoutput-typeone">1</span>
          <span class="inputoutput-base inputoutput-typetwo">月</span>
          <span class="inputoutput-base inputoutput-typeone">0</span>
          <span class="inputoutput-base inputoutput-typeone">3</span>
          <span class="inputoutput-base inputoutput-typetwo">日</span>
        </p>
      </div>
      <div class="storage-right">
        <h5>保质日期</h5>
        <p class="inputoutput">
          <i></i>
          <span class="inputoutput-base inputoutput-typeone">2</span>
          <span class="inputoutput-base inputoutput-typeone">0</span>
          <span class="inputoutput-base inputoutput-typeone">2</span>
          <span class="inputoutput-base inputoutput-typeone">2</span>
          <span class="inputoutput-base inputoutput-typetwo">年</span>
          <span class="inputoutput-base inputoutput-typeone">0</span>
          <span class="inputoutput-base inputoutput-typeone">6</span>
          <span class="inputoutput-base inputoutput-typetwo">月</span>
          <span class="inputoutput-base inputoutput-typeone">0</span>
          <span class="inputoutput-base inputoutput-typeone">3</span>
          <span class="inputoutput-base inputoutput-typetwo">日</span>
        </p>
      </div>
    </div>
  </el-card>
</template>

<script>
// import axios from "axios";
export default {
  props: {
    growthlist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // growthlist: [],
      batchNo: "",
      selectedpicdata: "",
      dialogFormVisible: false
    };
  },
  mounted() {
    // this.batchNo = this.batId;
    // setTimeout(() => {
    //   this.getgrowthdata();
    // }, 200);
  },
  methods: {
    // 弹出框
    imgUrl(e) {
      // console.log(e)
      this.selectedpicdata = e;
      this.dialogFormVisible = true;
    },

    // 跑马灯左右切换
    prev() {
      this.$refs.grofix.prev();
    },
    next() {
      this.$refs.grofix.next();
    }
  }
};
</script>
<style lang="scss" scoped>
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-card__body {
    padding: 0 !important;
    padding-bottom: 10px !important;
    // p {
    //   margin-left: 10px;
    //     font-size: 22px;
    // }
    .storage {
      display: flex;
      justify-content: space-evenly;
      min-height: 100px;
      .inputoutput {
        position: relative;
        > i {
          width: 90%;
          background: rgba(34, 87, 104, 1);
          height: 3px;
          position: absolute;
          z-index: 33;
          top: 37px;
        }
				.inputoutput-base{
          display:inline-block;
					width: 61px;
					height: 75px;
					line-height: 75px;
					margin-right: 4px;

				}
				.inputoutput-typeone{
					color: #FFFFFF;
					font-weight: 600;
					font-size: 56px;
					text-align: center;
					// line-height: 120px;
          box-sizing: border-box;
          border-radius: 8px;
          border: 1px solid rgba(0, 57, 71, 1);
					background-color: rgba(0, 57, 71, 1);
				}
				.inputoutput-typetwo{
					line-height: 30px;
					font-size: 26px;
					position: relative;
					top:5px;
				}
      }
      .storage-left {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        border-right:1px solid rgba(166, 166, 166, 1); ;
        h5 {
          width: 100%;
          text-align: start;
          box-sizing: border-box;
          font-size: 22px;
          padding-left: 45px;
        }
        p {
          width: 100%;
          text-align: center;
        }
      }
      .storage-right {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        h5 {
          width: 100%;
          text-align: start;
          font-size: 22px;
          box-sizing: border-box;
          padding-left: 51px;
        }
        p {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}

.honorary {
  width: 99%;
  height: 320px;
  margin: 10px 10px auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  background: #0f4656;
  align-items: center;
}
.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
</style>
